<template>
    <div id="news">
        <el-row>
            <el-col :span="16" :offset="4">
                <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">玖玖盈</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/news' }">新闻中心</el-breadcrumb-item>
                    <el-breadcrumb-item>{{newsType}}</el-breadcrumb-item>
                </el-breadcrumb>
                <div v-if="articleType == 'hot'">
                    <ul class="hot-wrap" v-if="articleLists.length">
                        <li v-for="(article, i) in articleLists" :key="i">
                            <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                            </a>
                            <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                            </router-link>
                        </li>
                    </ul>
                    <ul class="no-data" v-else>
                        <li class="tac">暂无数据</li>
                    </ul>
                </div>
                <div v-else>
                    <ul class="video-list" v-if="articleLists.length">
                        <li v-for="(article, i) in articleLists" :key="i">
                            <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                <div class="thumb">
                                    <img v-if="article.headerImgUrl" :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                </div>
                                <div class="right-content">
                                    <div class="article-title">{{article.articleTitle}}</div>
                                    <div class="article-time">{{formatTime(article.time)}}</div>
                                </div>
                            </a>
                            <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                <div class="thumb">
                                    <img v-if="article.headerImgUrl" :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                </div>
                                <div class="right-content">
                                    <div class="article-title">{{article.articleTitle}}</div>
                                    <div class="article-time">{{formatTime(article.time)}}</div>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                    <ul class="no-data" v-else>
                        <li class="tac">暂无数据</li>
                    </ul>
                </div>
                <el-pagination @current-change="currentChange" :current-page.sync="pageId" :page-size="pageSize" layout="prev, pager, next, jumper" :total="count" class="x-paginations">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getArticle } from '@/api/api'
export default {
    data: function() {
        return {
            mapObj: {
                'news': '每日新闻',
                'dailyStock': '每日金股',
                'discuss': '公众号平台',
                'forecast': '一句话读早晚评',
                'hot': '聚焦热点',
                'fast': '盘中快报'
            },
            articleLists: [],
            pageSize: 10,
            pageId: 1,
            count: 0,
            articleType: '',
            newsType: ''
        }
    },
    created: function() {
        this.articleType = this.$route.query.articleType || 'news';
        this.pageId = parseInt(this.$route.query.pageId) || 1;
        this.formatArticleTitle(this.articleType)
        this.getArticleList();
    },
    methods: {
        formatArticleTitle: function(type){
            for(var key in this.mapObj){
                if(type == key){
                    this.newsType = this.mapObj[key];
                    return;
                }
            }
        },
        getArticleList: function() {
            getArticle( { articleCategoryType: this.articleType, pageSize: this.pageSize, pageId: this.pageId }).then(res => {
                this.articleLists = res.list;
                this.count =parseInt(res.count);
            })
        },
        currentChange: function(val) {
            this.$router.push('?pageId=' + val)
            this.pageId = val;
            this.getArticleList()
        },
        formatTime: function(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + sec;
        }
    }
}

</script>
<style scoped>
.video-list {
    list-style: none;
    padding-left: 0;
}

.video-list li {
    line-height: 30px;
    margin: 10px 0;
    padding: 5px;
    /*border: 1px solid #c5c0c0;*/
    border-radius: 2px;
    transition: all .3s linear;
}



.video-list li:hover {
    box-shadow: 0 3px 18px 0 rgba(0, 0, 0, .3);
}

.video-list li:hover .article-target {
    color: #c32525;
}
.article-target {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    transition: all .3s linear;
    color: #5a5f67;
    overflow: hidden;
    zoom: 1;
}

.thumb {
    width: 120px;
    height: 80px;
    background-color: rgba(0, 0, 0, .1);
    float: left;
}

.thumb img {
    width: 100%;
    height: 100%;
}

.right-content {
    width: calc(100% - 130px);
    float: left;
    margin-left: 10px;
}

.article-title {
    font-size: 20px;
    line-height: 2;
}
.article-time{
    font-size: 16px;
}
.no-data{
    list-style: none;
    margin: 200px 0;
    padding: 0;
}
.tac{
    text-align: center;
}

.hot-wrap{
    list-style: none;
    margin: 0;
    padding: 0;
}
.hot-wrap li{
    margin: 10px 0;
}
.hot{
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: #69a3e0;
    color: #fff;
    font-weight: bold;
}
.hot-0{
    background-color: #e83b3b;
}
.hot-1{
    background-color: #e28853;
}
.hot-2{
    background-color: #e4b224;
}
.hot-content{
    font-size: 18px;
    display: inline-block;
    width: calc(100% - 40px);
    line-height: 30px;
    margin-left: 10px;
    transition: all .3s linear;
    vertical-align: top;
}
.hot-content:hover{
    color: #d80f0f;
}
</style>
